<template>
    <header>
        <slot name="left"></slot>
        <div class="goods-search">
            <i-select 
                class="select"
                v-model="$_groupModel">
                <i-option 
                    v-for="(item, index) in $_groupList"
                    :value="item.value"
                    :key="index">
                    {{ item.label }}
                </i-option>
            </i-select>
            <i-select 
                class="select"
                v-model="$_categoryModel">
                <i-option 
                    v-for="(item, index) in $_categoryList"
                    :value="item.value"
                    :key="index">
                    {{ item.label }}
                </i-option>
            </i-select>
            <i-input
                class="input"
                v-model="inputValue"
                placeholder="请输入商品名称"
                style="width: 300px">
            </i-input>
            <i-button type="info">搜索</i-button>
        </div>
    </header>
</template>
<script>
import * as types from '@/admin/store/mutation-types'
// mapState
import { mapState } from 'vuex'

export default {
    name: 'goods-search',
    data() {
        return {
            inputValue: '',
            goodsNamespaced: 'goods'
        }
    },
    computed: {
        ...mapState('goods', [
            'groupModel',
            'groupList',
            'categoryModel',
            'categoryList'
        ]),
        $_groupList: {
            get() {
                return this.groupList
            }
        },
        $_groupModel: {
            get() {
                return this.groupModel
            },
            set(val) {
                this.$store.commit(
                    `${this.goodsNamespaced}/${types.SET_SELECT_MODEL}`,
                    { modelName: 'groupModel', modelValue: val }
                )
            }
        },
        $_categoryList: {
            get() {
                return this.categoryList
            }
        },
        $_categoryModel: {
            get() {
                return this.categoryModel
            },
            set(val) {
                this.$store.commit(
                    `${this.goodsNamespaced}/${types.SET_SELECT_MODEL}`,
                    { modelName: 'categoryModel', modelValue: val }
                )
            }
        }
    }
}
</script>
<style lang="less" scoped>
@import '~@/assets/style/theme/index';
header {
    display: flex;
    justify-content: space-between;
    background: @table-thead-bg;
    padding: @gap;
}
.select,
.input {
    width: 200px;
    margin-right: 4px;
}
</style>